﻿
@{
    ViewData["Title"] = "栏目管理";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<div class="container-div">
    <div class="row">
        <div class="btn-group-sm" role="group" id="toolbar">
            <a class="btn btn-success" onclick="add();" data-role="cms:channel:add">
                <i class="fa fa-plus"></i> 新增
            </a>
            <a class="btn btn-primary single" onclick="edit(this);" data-id="0" data-role="cms:channel:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger single" onclick="removeAll(this);" data-id="0" data-role="cms:channel:delete">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-info" onclick="expandAll();" data-role="0">
                <i class="fa fa-exchange"></i> 展开/折叠
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="dataTable"></table>
        </div>
    </div>
</div>
@section scripts{
    <script type="text/javascript" src="~/ui/plugins/bootstrap-treetable/bootstrap-treetable.js"></script>
    <script>
        var $table;
        $(function () {
            loadGrid();
        });

        function loadGrid() {
            let options = {
                url: '/Cms/Channel/GetData',
                id: 'dataTable',
                code: "id",
                parentCode: "parent_id",
                uniqueId: "id",
                toolbar: '#toolbar',
                rootIdValue: 0,
                striped: false,
                expandColumn: 1,
                showSearch: true,
                showRefresh: true,
                showColumns: true,
                expandAll: true,
                expandFirst: true,
                columns: [
                    { field: 'selectItem', radio: true },
                    { field: 'channel_name', title: '栏目名称', align: 'left', formatter: renderTitle },
                    { field: 'channel_index', title: '栏目索引', align: 'left' },
                    {
                        field: 'channel_image', title: '栏目图片', align: 'left', formatter: function (v) {
                            if (v) {
                                let btnHtml = '<a class="btn btn-info btn-xs" onclick="showImage(this);"  data-id="' + v + '"><i class="fa fa-rocket"></i>查看</a>';
                                return btnHtml;
                            }
                            return '';
                        }
                    },
                    { field: 'channel_href', title: '外链', align: 'center' },
                    { field: 'sort_num', title: '排序', align: 'center' },
                    {
                        field: 'drawing_enable', title: '顶部渲染标识', align: 'left', formatter: function (v) {
                            if (v === 0) {
                                return '<span class="label label-danger">不渲染</span>';
                            }
                            return '';
                        }
                    },
                    {
                        field: 'link_type', title: '链接方式', align: 'left', formatter: function (v) {
                            if (v === 0) {
                                return '默认';
                            }
                            return '链接到第一篇文章';
                        }
                    }
                   
                ]
            };
            $table = $("#dataTable").easyTreeTable(options);

        }


        function showImage(obj) {
            let imgUrl = $(obj).data('id');
            let imageHtml = '<img src="' + imgUrl +'" style="width:500px;;height:300px;"/>';
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ['auto'],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: imageHtml
            });
        }

        function renderTitle(v, d) {
            var href = '/index.html';
            if (v != '首页') {
                href = '/channel/' + d.id;
            }
            return '<a href="' + href + '" target="_blank">' + v + '</a>';
            //return '<a href="/static/content/' + d.channel_id + '/' + d.id + '.html" target="_blank">' + v + '</a>';
        }
        function add() {
            var url = '/cms/Channel/Form';

            jutils.dialogAuto('添加栏目', url, { id: 0 }, function () {

            });

        }
        function edit(obj) {
            var rows = $table.easyTreeTable("selected");
            if (rows.length == 0) {
                jutils.warn("请选择数据行");
                return;
            }
            var url = '/cms/Channel/Form';
            jutils.dialogAuto('修改栏目', url, { id: rows[0].id }, function () {
                $table.easyTreeTable('search');
            });
        }

        function removeAll(obj) {
            var rows = $table.easyTreeTable("selected");
            if (rows.length == 0) {
                jutils.warn("请选择数据行");
                return;
            }

            jutils.confirm("确认删除当前栏目及其子栏目吗", function () {
                jutils.ajaxGet('/cms/Channel/DeleteById', { id: rows[0].id }, function (res) {
                    $table.easyTreeTable('search');
                })
            })
        }


        function expandAll() {
            $table.easyTreeTable('expandAll');
        }
    </script>
}



